<template>
  <div class="text" :class="suffix===true?'suffix':''">
    <slot></slot>
  </div>
</template>
<script >
import AnimateText from "animate-text";

export default {
  name: "AnimateText",
  props: {
    time: {
      type: Number,
      default: 1000
    },
    suffix: {
      type: Boolean,
      default: false
    },
    isNumber: {
      type: Boolean,
      default: false
    },
    startNumber: {
      type: Number,
      default: 0
    },
    changeCount: {
      type: Number,
      default: 32
    },
  },
  mounted() {
    new AnimateText ('.text', {
      time: this.time,
      isNumber: this.isNumber,
      startNumber: this.startNumber,
      changeCount: this.changeCount,
      onAnimated: this.onAnimated
    })
  },
  methods: {
    onAnimated() {
      this.$emit('onAnimated')
    }
  }
}
</script>
<style lang="scss" scoped>
.suffix::after {
  content: "|";
  animation: cursor .5s infinite;
}
@keyframes cursor {
  from {color: #000;}
  to {color: #fff;}
}
</style>